<template>
  <transition enter-active-class="slideInUp faster animated" leave-active-class="slideOutDown faster animated">
    <div class="sendHbModule" v-show="isShowAni">
      <div class="sendHbBox publicVCenter">
        <img src="@/assets/image/popupArea/closeIcon.png" class="closeIcon" v-tap="{ methods: closePopupModule }" />
        <img src="@/assets/image/hdBar/sendHbTitle.png" class="sendHbTitle" />
        <div class="nav publicVCenter">
          <div class="navItem publicVCenter" :class="{ active: navIndex === 0 }" v-tap="{ methods: chooseNav, navIndex: 0 }">摇红包</div>
          <div class="navItem publicVCenter" :class="{ active: navIndex === 1 }" v-tap="{ methods: chooseNav, navIndex: 1 }">点红包</div>
        </div>
        <div class="hbForm publicVCenter">
          <div class="formItem publicVCenter">
            <label>总金额</label>
            <input placeholder="1~1000元" v-model="money" />
          </div>
          <div class="formItem publicVCenter">
            <label>红包个数</label>
            <input placeholder="填写红包个数" v-model="num" />
          </div>
          <div class="formItem area">
            <textarea v-model="content" maxlength="40" ref="text" cols="30" rows="10" placeholder="请输入祝福内容(40字以内)"></textarea>
            <div class="refreshBtn publicVCenter" v-tap="{ methods: ganerateRandomWish }">
              <img src="@/assets/image/hdBar/refresh.png" class="refreshIcon" />
              换一换
            </div>
          </div>
          <div class="operateArea publicVCenter">
            <div class="payInfo">
              支付
              <label class="price">{{ money }}</label
              >￥
            </div>
            <div class="payBtn publicHvCenter" v-tap="{ methods: sendHb }">塞钱进红包</div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import { mapMutations, mapState } from 'vuex';
import { POPUP_MODULE, QUICKWISH } from '@/assets/constant/index';
import { timeoutTask, generateRandom } from '../../utils';

const wx = require('weixin-js-sdk');

const quickWishLen = QUICKWISH.length;

export default {
  name: 'sendHbPopup',
  computed: {
    ...mapState({
      sceneType: (state) => state.live.sceneType,
      giftSendVisible: (state) => state.app.giftSendVisible,
      songSheetList: (state) => state.app.songSheetList,
    }),
    choosedPrice() {
      let tempPrice = 0;
      if (this.choosedSongId) {
        tempPrice = this.songSheetList.find((item) => item.id === this.choosedSongId).price;
      }
      return tempPrice;
    },
    orderedNum() {
      return this.songOrderList.length;
    },
    choosedSongName() {
      let tempName = '';
      if (this.choosedSongId) {
        tempName = this.songSheetList.find((item) => item.id === this.choosedSongId).name;
      }
      return tempName;
    },
  },
  created() {
    this.ganerateRandomWish();
  },
  mounted() {
    // 执行弹出动画
    this.showAniStart();
  },
  data() {
    return {
      isShowAni: false, // sendHb box弹出动画
      sendHbModuleKey: POPUP_MODULE.sendHbModule.key,
      navIndex: 0,
      money: '',
      num: '',
      content: '',
    };
  },
  methods: {
    ...mapMutations({
      togglePopup: 'app/togglePopup',
      setOrigin: 'app/setOrigin',
    }),
    showAniStart() {
      this.isShowAni = true;
    },
    hideAniStart() {
      this.isShowAni = false;
    },
    chooseNav(p) {
      console.log(p.navIndex);
      this.navIndex = p.navIndex;
    },
    closePopupModule() {
      this.hideAniStart();
      timeoutTask(() => {
        this.togglePopup();
      }, 200);
    },
    validateSendHb() {
      let flag = true;
      if (!/^[0-9]+([.]{1}[0-9]{1,2})?$/.test(this.money)) {
        this.$toast.center('请输入正确的金额!');
        flag = false;
      } else if (!/(^[1-9]\d*$)/.test(this.num)) {
        this.$toast.center('请输入正确的个数!');
        flag = false;
      } else if (parseFloat(this.money) / parseInt(this.num, 10) < 0.3) {
        this.$toast.center('单个红包金额必须大于0.3元!');
        flag = false;
      } else if (this.num < 3) {
        this.$toast.center('红包个数至少3个!');
        flag = false;
      }
      return flag;
    },
    sendHb() {
      if (!this.validateSendHb()) {
        return;
      }
      this.setOrigin('rechargeHby');
      // 跳转小程序支付
      wx.miniProgram.navigateTo({
        url: `/pages/pay/pay?openId=${this.$store.state.user.openId}&userId=${this.$store.state.user.userId}&total=${this.money}&hbyNum=${this.num}&hbyType=${this.navIndex}&origin=${this.$store.state.app.origin}&hbyContent=${this.content}`,
      });
      console.log(
        `/pages/pay/pay?openId=${this.$store.state.user.openId}&userId=${this.$store.state.user.userId}&total=${this.money}&hbyNum=${this.num}&hbyType=${this.navIndex}&origin=${this.$store.state.app.origin}&hbyContent=${this.content}`,
      );
    },
    ganerateRandomWish() {
      this.content = QUICKWISH[generateRandom(0, quickWishLen)];
    },
  },
};
</script>
<style lang="less" scoped>
.sendHbModule {
  position: absolute;
  width: 100%;
  bottom: 0;
  .sendHbBox {
    width: 750px;
    height: 804px;
    background: #170d41;
    flex-direction: column;
    position: relative;
    .closeIcon {
      width: 48px;
      height: 48px;
      position: absolute;
      right: 16px;
      top: 4px;
    }
    .sendHbTitle {
      width: 342px;
      height: 72px;
    }
    .nav {
      justify-content: space-around;
      width: 100%;
      margin-top: 40px;
      .navItem {
        font-size: 28px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
        flex-direction: column;
        &.active {
          color: #fff;
          &::after {
            display: block;
            content: '';
            width: 32px;
            height: 4px;
            background: #ffffff;
            border-radius: 20px;
            margin-top: 4px;
          }
        }
      }
    }
    .hbForm {
      flex-direction: column;
      width: 100%;
      margin-top: 40px;
      .formItem {
        width: 670px;
        height: 104px;
        background: #0e1123;
        border: 2px solid #0e101f;
        border-radius: 8px;
        padding: 0 32px;
        position: relative;
        margin-bottom: 24px;
        label {
          font-size: 28px;
          color: #fff;
          font-weight: 500;
        }
        input {
          outline: none;
          background-color: transparent;
          border: none;
          width: 500px;
          height: 100%;
          position: absolute;
          right: 32px;
          text-align: right;
          color: #fff;
          &::-webkit-input-placeholder {
            color: #706e95;
          }
        }
        textarea {
          outline: none;
          background-color: transparent;
          border: none;
          width: 100%;
          height: 100%;
          padding: 20px 0;
          color: #fff;
          &::-webkit-input-placeholder {
            color: #706e95;
          }
        }
        .refreshBtn {
          font-size: 22px;
          font-weight: 400;
          color: #8c85cb;
          position: absolute;
          right: 32px;
          bottom: 16px;
          .refreshIcon {
            width: 22px;
            height: 22px;
            margin-right: 9px;
          }
        }
        &.area {
          height: 138px;
        }
      }
      .operateArea {
        justify-content: space-between;
        padding: 0 32px;
        margin-top: 32px;
        width: 100%;
        position: absolute;
        bottom: 60px;
        .payInfo {
          font-size: 28px;
          font-weight: 400;
          color: #c2baf5;
          .num {
            color: #ff3675;
          }
          .price {
            color: #ff3675;
            font-size: 40px;
            margin-left: 12px;
          }
        }
        .payBtn {
          width: 252px;
          height: 72px;
          opacity: 1;
          background: linear-gradient(90deg, #6c47ff, #ff68f9 100%);
          border-radius: 12px;
          color: #fff;
        }
      }
    }
  }
}
</style>
